<template>
  <view class="success-detail-page">
    <!-- 头部导航 -->
    <myHeader title="详情" showBack />
    <view style="padding: 32rpx">
      <view class="success-detail-wrap">
        <!-- 内容区域，根据标签显示对应数据 -->
        <text class="title line-1">{{ detailObj.title }}</text>
        <u-parse class="case-desc" :content="detailObj.context"></u-parse>
        <text class="time">{{
          formatDate(detailObj.createTime, "YYYY-MM-DD HH-mm-ss")
        }}</text>
      </view>
      <view class="recommend">
        <view class="recommend-title">
          <image
            src="https://www.rebirthealth.com/static/images/title.png"
            alt=""
          ></image>
          <view>热门案例</view>
        </view>
        <view
          class="mission-list-item"
          v-for="(item, index) in bountyList1"
          :key="index"
          @click="goToDetail(item)"
        >
          <view class="number">
            <image
              src="https://www.rebirthealth.com/static/images/no1.png"
              alt=""
              v-if="index == 0"
            ></image>
            <image
              src="https://www.rebirthealth.com/static/images/no2.png"
              alt=""
              v-else-if="index == 1"
            ></image>
            <image
              src="https://www.rebirthealth.com/static/images/no3.png"
              alt=""
              v-else-if="index == 2"
            ></image>
            <view v-else class="index">{{ index + 1 }}</view>
          </view>
          <view class="summary">{{ item.title }}</view>
        </view>
        <view class="more-btn" @click="goMore('visits')">查看更多</view>
      </view>
      <view class="recommend">
        <view class="recommend-title">
          <image
            src="https://www.rebirthealth.com/static/images/title.png"
            alt=""
          ></image>
          <view>猜你喜欢</view>
        </view>
        <view
          class="mission-list-item"
          v-for="(item, index) in bountyList2"
          :key="index"
          @click="goToDetail(item)"
        >
          <view class="number">
            <image
              src="https://www.rebirthealth.com/static/images/no1.png"
              alt=""
              v-if="index == 0"
            ></image>
            <image
              src="https://www.rebirthealth.com/static/images/no2.png"
              alt=""
              v-else-if="index == 1"
            ></image>
            <image
              src="https://www.rebirthealth.com/static/images/no3.png"
              alt=""
              v-else-if="index == 2"
            ></image>
            <view v-else class="index">{{ index + 1 }}</view>
          </view>
          <view class="summary">{{ item.title }}</view>
        </view>
        <view class="more-btn" @click="goMore('shares')">查看更多</view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatDate } from "@/utils/util";
import myHeader from "@/component/header";
import { getSuccessDetail, getSuccessList } from "@/api";
export default {
  components: {
    myHeader,
  },
  data() {
    return {
      successList1: [{ title: "123" }, { title: "123" }, { title: "123" }],
      caseId: "",
      detailObj: {},
      bountyList1: [],
      bountyList2: [],
      page: {
        pageNo: 1,
        pageSize: 3,
        total: 0,
      },
    };
  },
  onLoad(options) {
    this.caseId = options.caseId;
    console.log(this.caseId);
    this.getData();
    this.getList1();
    this.getList2();
  },
  methods: {
    formatDate(time, format) {
      return formatDate(time, format);
    },
    async getData() {
      this.detailObj = await getSuccessDetail({
        caseId: this.caseId,
        lang: "zh",
      });
    },
    goMore(type) {
      uni.navigateTo({
        url: `/pages/success/successList?type=${type}`,
      });
    },
    // 热门案例
    async getList1() {
      let res = await getSuccessList({
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        orderBy: "visits",
        status: 0,
      });
      this.bountyList1 = res.list;
    },
    // 猜你喜欢
    async getList2() {
      let res = await getSuccessList({
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        orderBy: "shares",
        status: 0,
      });
      this.bountyList2 = res.list;
    },
    goToDetail(item) {
      uni.navigateTo({
        url: `/pages/success/successDetail?caseId=${item.caseId}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.success-detail-page {
  background-color: rgba(19, 30, 50, 1);
  min-height: 100vh;
  color: #fff;
  .success-detail-wrap {
    min-height: 500rpx;
    background: #fff;
    border-radius: 16rpx;
    color: #333;
    margin-bottom: 16rpx;
    padding: 32rpx;
    .case-desc {
      image {
        width: 100%;
      }
    }
    .title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }
    .time {
      font-size: 24rpx;
      color: #333333;
    }
  }
  .recommend {
    background: #fff;
    padding: 32rpx;
    border-radius: 16rpx;
    margin-bottom: 16rpx;
  }
  .recommend-title {
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 32rpx;

    image {
      width: 58rpx;
      height: 40rpx;
      margin-right: 18rpx;
    }
  }
  .mission-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .number {
      background: rgba(210, 229, 246, 0.4);
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      image {
        width: 100%;
        height: 100%;
      }

      .index {
        font-size: 30rpx;
        color: #425f9b;
        font-weight: bold;
      }
    }

    .summary {
      flex: 1;
      font-size: 28rpx;
      color: #333333;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
  .more-btn {
    text-align: center;
    font-size: 28rpx;
    color: #339eff;
  }
}
</style>